import React from 'react';
import {
  Dimensions, FlatList, Animated, Image, StyleSheet
} from 'react-native';
import { Tip } from 'beeshell';

import { Block, Text, Button } from '../components';
import { theme } from '../constants';

const { width, height } = Dimensions.get('window');

const scrollX = new Animated.Value(0);

// render pictures
const renderItemInIllustrations = ({ item }) => (
  <Image
    source={item.source}
    resizeMode="contain"
    style={{ width, height: height / 2.5, overflow: 'visible' }}
  />
);

// scroll pictures in the top half of the Welcome page
const renderIllustrations = ({ illustrations }) => (
  <FlatList
    horizontal
    pagingEnabled
    scrollEnabled
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={16}
    snapToAlignment="center"
    data={illustrations}
    keyExtractor={(item) => item.id}
    renderItem={renderItemInIllustrations}
    onScroll={Animated.event([
      {
        nativeEvent: { contentOffset: { x: scrollX } },
      },
    ])}
  />
);

// render indicator
const renderSteps = ({ illustrations }) => {
  const stepPosition = Animated.divide(scrollX, width);
  return (
    <Block row center middle style={styles.stepsContainer}>
      {illustrations.map((item, index) => {
        const opacity = stepPosition.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [0.4, 1, 0.4],
          extrapolate: 'clamp',
        });
        return (
          <Block
            animated
            flex={false}
            key={item.id}
            color="gray"
            style={[styles.steps, { opacity }]}
          />
        );
      })}
    </Block>
  );
};

// render the welcome page
export default function Welcome(props) {
  const { navigation } = props;
  return (
    <Block>
      <Block center bottom flex={0.4}>
        <Text h1 center bold>
          Indus
          <Text h1 primary>
            try
          </Text>
        </Text>
      </Block>
      <Block center middle>
        {renderIllustrations(props)}
        {renderSteps(props)}
      </Block>
      <Block middle flex={0.5} margin={[theme.sizes.padding * 2]}>
        <Button
          gradient
          onPress={() => navigation.navigate('Login')}
        >
          <Text center semibold white>
            登录
          </Text>
        </Button>
        <Button
          shadow
        >
          <Text
            center
            semibold
            onPress={() => Tip.show('暂不开放注册', 2)}
          >
            注册
          </Text>
        </Button>
        <Button>
          <Text center caption gray>
            使用协议
          </Text>
        </Button>
      </Block>
    </Block>
  );
}

Welcome.defaultProps = {
  illustrations: [
    { id: '1', source: require('../assets/images/space.jpg') },
    { id: '2', source: require('../assets/images/space.jpg') }
  ],
};

const styles = StyleSheet.create({
  stepsContainer: {
    position: 'absolute',
    bottom: theme.sizes.base * 3,
    right: 0,
    left: 0,
  },
  steps: {
    width: 5,
    height: 5,
    borderRadius: 5,
    marginHorizontal: 2.5,
  },
});
